<template>
  <div class="home">
    <swiper :options="swiperOptions">
      <swiper-slide>
        <img class="w-100" src="../../assets/images/lbt1.jpg" alt="1" />
      </swiper-slide>
      <swiper-slide>
        <img
          class="w-100"
          src="../../assets/images/edcc926fc132d135710b4d0753309621.jpeg"
          alt="1"
        />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../../assets/images/lbt1.jpg" alt="1" />
      </swiper-slide>
      <div
        class="swiper-pagination pagination-home text-right px-3 pb-1"
        slot="pagination"
      ></div>
    </swiper>

    <!-- 热门视频 -->
    <!-- <div class="p-3 mt-3 bg-white">
      <div class="card-header d-flex ai-center">
        <i class="iconfont icon-menu1"></i>
        <div class="fs-lg flex-1 px-2">
          <strong class="fs-xl">热门视频</strong>
        </div>
        <div class="nav jc-between">
          <div
            class="nav-item mx-2"
            :class="{ active: active === i }"
            v-for="(category, i) in videoData"
            :key="i"
            @click="$refs.list.swiper.slideTo(i)"
          >
            <div class="nav-link">{{ category.rank }}</div>
          </div>
        </div>
      </div>
      <div class="border-bottom mt-3"></div>

      <div class="pt-3">
        <swiper
          :options="{ autoHeight: true }"
          ref="list"
          @slide-change="() => (active = $refs.list.swiper.realIndex)"
        >
          <swiper-slide v-for="(category, i) in videoData" :key="i">
            <div class="d-flex flex-wrap" style="margin: 0 0.05rem">
              <router-link
                tag="div"
                :to="`/`"
                class="p-1 text-dark-1"
                style="width: 100%"
                v-for="(video, i) in category.videoList"
                :key="i"
              >
                <div
                  class="d-flex jc-between w-100 fs-md"
                  style="height: 3rem; line-height: 1.5rem"
                >
                  <div class="text-ellipse" style="width: 85%">
                    <img src="" alt="" />
                    <span>{{ `${i + 1}.${video.name}` }}</span>
                  </div>
                  <i
                    class="iconfont icon-menu1 text-grey-1"
                    style="font-size: 1rem"
                  >
                    <span class="ml-1">996</span>
                  </i>
                </div>
                <div class="border-bottom" style="margin-top: -0.9rem"></div>
              </router-link>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="text-center text-grey-1 pt-2 fs-md">查看完整榜单</div>
    </div> -->

    <!-- 英雄攻略 -->
    <m-card none icon="menu1" title="英雄攻略">
      <div class="border-top pt-3"></div>
      <!-- header -->
      <div class="nav jc-between">
        <div
          class="nav-item"
          :class="{ active: active === i }"
          v-for="(item, i) in typeList.heroList"
          :key="i"
          style="width: 14%"
          @click="$refs.list.swiper.slideTo(i)"
        >
          <img :src="item.avatar" alt="" class="w-100 p-1" />
        </div>
        <button
          class="menu d-flex ai-center jc-center m-1"
          @click="dialogVisible = true"
        >
          更多
        </button>
      </div>

      <!-- body -->
      <div class="pt-3">
        <swiper
          :options="{ autoHeight: true }"
          ref="list"
          @slide-change="() => (active = $refs.list.swiper.realIndex)"
        >
          <swiper-slide v-for="(item, i) in typeList.heroList" :key="i">
            <div class="d-flex flex-wrap" style="margin: 0 0.05rem">
              <router-link
                tag="div"
                :to="`/`"
                class="p-1 text-grey"
                style="width: 50%"
                v-for="(video, i) in item.videoList"
                :key="i"
              >
                <div v-if="i <= 1">
                  <img
                    :src="video.image"
                    class="w-100"
                    style="height: 7.5rem"
                  />
                  <div
                    class="w-100 fs-md text-ellipses"
                    style="height: 3rem; line-height: 1.5rem"
                  >
                    {{ video.name }}
                  </div>
                  <div class="after d-flex flex-wrap jc-between px-1 py-2">
                    <i class="iconfont icon-menu1" style="font-size: 0.6154rem">
                      <span class="ml-1">0</span>
                    </i>
                    <div class="text-grey-1 fs-sm">
                      {{
                        (video.createdAt ? video.createdAt : video.updatedAt)
                          | date
                      }}
                    </div>
                  </div>
                </div>
              </router-link>
            </div>
            <!-- ---------- -->
            <div class="border-bottom p-1 mb-2"></div>

            <div style="margin: 0 0.05rem">
              <router-link
                tag="div"
                :to="`/`"
                class="p-1 text-grey"
                v-for="(video, i) in item.videoList"
                :key="i"
              >
                <div class="d-flex" v-if="i > 1">
                  <div class="header">
                    <img
                      :src="video.image"
                      style="height: 6rem; width: 10rem"
                    />
                  </div>
                  <div class="footer pl-3">
                    <div
                      class="fs-md text-ellipses"
                      style="height: 3rem; line-height: 1.5rem"
                    >
                      {{ video.name }}
                    </div>
                    <div class="after d-flex flex-wrap jc-between px-1 py-2">
                      <div class="text-grey-1 fs-sm">
                        {{
                          (video.createdAt ? video.createdAt : video.updatedAt)
                            | date
                        }}
                      </div>
                    </div>
                  </div>
                </div>
              </router-link>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </m-card>

    <el-dialog title="英雄列表" :visible.sync="dialogVisible" width="100%">
      <div class="card-body pt-3">
        <div class="nav jc-between">
          <div
            class="nav-item"
            :class="{ active: active === i }"
            v-for="(category, i) in heroData"
            :key="i"
            @click="$refs.list.swiper.slideTo(i)"
          >
            <div class="nav-link">{{ category.name }}</div>
          </div>
        </div>

        <!-- body-内容 -->
        <div class="pt-3">
          <!-- :options="{autoHeight: true}" 控制自动高度 -->
          <swiper
            :options="{ autoHeight: true }"
            ref="list"
            @slide-change="() => (active = $refs.list.swiper.realIndex)"
          >
            <swiper-slide v-for="(category, i) in heroData" :key="i">
              <div class="d-flex flex-wrap" style="margin: 0 0.05rem">
                <div
                  class="p-2 text-center"
                  style="width: 20%"
                  v-for="(hero, i) in category.heroList"
                  :key="i"
                  @click="changeArr(hero._id)"
                >
                  <img :src="hero.avatar" class="w-100" />
                  <div>{{ hero.name }}</div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <!-- <list-card none icon="card-hero" title="英雄列表" :categories="heroData">
        <template #items="{ category }">
          <div class="d-flex flex-wrap" style="margin: 0 0.05rem">
            <router-link
              tag="div"
              :to="`/heroes/${hero._id}`"
              class="p-2 text-center"
              style="width: 20%"
              v-for="(hero, i) in category.heroList"
              :key="i"
            >
              <img :src="hero.avatar" class="w-100" />
              <div>{{ hero.name }}</div>
            </router-link>
          </div>
        </template>
      </list-card> -->
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  // 过滤器
  filters: {
    // 时间过滤
    date(val) {
      return dayjs(val).format("MM/DD");
    },
  },
  data() {
    return {
      // 轮播图pagination样式
      swiperOptions: {
        pagination: {
          el: ".pagination-home",
        },
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        // 循环
        loop: true,
        autoplay: {
          delay: 1500,
          disableOnInteraction: false,
        },
      },
      // 视频数据
      videoData: [],
      // 英雄攻略
      heroList: [],
      // 英雄攻略导航
      typeList: [],
      heroData: [],
      active: 0,
      activeIndex: "1",
      dialogVisible: false,
    };
  },
  watch(){

  },
  created() {
    this.fetchVideoData();
    this.fetchHeroList();
    this.fetchHeroData();
  },
  methods: {
    async fetchVideoData() {
      const res = await this.$http.get("video-rank/list");
      this.videoData = res.data;
    },
    async fetchHeroList() {
      const res = await this.$http.get("hero-video/list");
      this.heroList = res.data.slice(1);
      let arr = res.data.slice(0, 1)[0];
      this.typeList = arr;
    },
    async fetchHeroData() {
      const res = await this.$http.get("heroes/list");
      this.heroData = res.data.slice(1);
    },
    async changeArr(v){
      const res = await this.$http.get(`heroes/${v}`);
      const res1 = await this.$http.get("hero-video/list");

      let arr = res1.data.slice(0, 1)[0].heroList;
      arr.pop()
      arr.push(res.data)
      this.$set(this.typeList,'heroList',arr)
      this.dialogVisible = false
    }
  },
};
</script>

<style lang="scss">
@import "../../assets/scss/_variable.scss";
.pagination-home {
  // 根据模块本身定义的类名来定义
  .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0.1538rem;
    background: map-get($colors, "white");
    &.swiper-pagination-bullet-active {
      background: map-get($colors, "info");
    }
  }
}
.menu {
  width: 13%;
  height: 3.2308rem;
  background-color: map-get($colors, "light-1");
  border: 1px solid map-get($colors, "grey");
}
</style>
